Support Vite 8 in the setup guide and example app#486
Conversation
@vitejs/plugin-react@6 no longer runs Babel, so the react-strict-dom preset now runs through vite-plugin-babel with an explicit include that also covers example-ui. Switch to the native resolve.tsconfigPaths and optimizeDeps.rolldownOptions, and drop vite-tsconfig-paths.
Lead with the Vite 8 setup and keep Vite 7 below as just the differences. Explain why the preset must run through vite-plugin-babel when @vitejs/plugin-react@6 drops Babel.
|
I have the feeling that we should handle "new version setup" differently. Maybe we could just keep latest version on the website, and add a note somewhere to previous doc version ? That's just an idea. Eg:
|
|
Thanks for the feedback @MoOx, that's a fair point. My thinking for keeping both versions on the page came from the StyleX Vite docs (https://stylexjs.com/docs/learn/installation/vite), so I followed a similar shape here. That said, I'm happy to change it. As a middle ground, what about one Vite section with a sub-section per major version? The latest stays front and center, but the previous one is still discoverable on the page instead of only living in git history. Let me know if you'd rather just keep the latest with a link back to the old instructions, like in your example. |
|
@yaminyassin I don't see anything particular on the stylex link you mentioned. Did they update recently ? I am no official maintainer here, so we could gather some other feedbacks cc @martinbooth |
Regenerate package-lock.json against merged package.json files.
workflow: benchmarks/sizeComparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
|
workflow: benchmarks/perf (native)Comparison of performance test results, measured in operations per second. Larger is better.
|
StyleX's Vite setup isn't one flat config, it's a base page plus a sub-page per setup:
StyleX splits the base vite config under framework specific guides and that's the shape I borrowed. The difference is that StyleX splits by framework/runtime and I'm splitting by Vite major version, but the pattern is identical of the one base config plus a thin section listing only what changes. Since StyleX is what compiles our styles, following their layout felt like the natural fit. Worth noting the PR isn't two full setups on one page either. Vite 8 is the base, and the Vite 7 section is only the mentions changes needed to get it fully configured. The maintenance surface is small, and dropping it removes the on-page path for everyone still on Vite 7. I'm happy with either choice though, the main strength of this pr is guiding the new users on how to set this up with the latest Vite version |
|
LGTM |
3 participants
Summary
On Vite 8,
@vitejs/plugin-react@6no longer runs Babel. JSX and Fast Refresh moved to Oxc, and the plugin'sbabeloption is ignored. The current setup guide relies on that option to applyreact-strict-dom/babel-preset, so on Vite 8 the preset never runs.vite buildstill passes because it does not render components, so the failure only shows when a styled component first renders:This updates both the guide and the
vite-appexample to a configuration that works on Vite 8.Changes
03-vite.md): lead with the Vite 8 setup and keep Vite 7 below as the set of differences from it. The Vite 8 config applies the preset throughvite-plugin-babelwith an explicitinclude, uses the nativeresolve.tsconfigPaths, and passes the platform extensions throughoptimizeDeps.rolldownOptions. Also removed a stale comment and import name in the PostCSS block.apps/vite-app): upgrade tovite@8,@vitejs/plugin-react@6, andvite-plugin-babel@1.7; dropvite-tsconfig-paths; move the preset ontovite-plugin-babelwith anincludethat also coversexample-ui.Why the
includeis requiredvite-plugin-babelcombinesincludeandfilterwith a logical AND, and its defaultincludeof/\.jsx?$/matches.jsand.jsxbut not.tsor.tsx. Without an explicitinclude, TypeScript source is skipped and the preset never runs.Testing
npm run buildinapps/vite-appsucceeds. The emitted CSS contains the atomic classes for the app andexample-ui, and the bundle has no runtimestylex.createcall left.npm run lintpasses.